<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>DEMO6：自定义画板</title>
    <style type="text/css">
        canvas{
			display: block;
			margin: 0 auto;
			border:1px solid rgb(0, 38, 255);
		}

    </style>
</head>
<body>

<canvas id="canvas" width="750" height="500">
    浏览器不支持canvas   <!-- 如果不支持会显示这段文字 -->
</canvas>
<center>
<br>
<input type="color" name="color" id="color" onchange="changeColor()">
&emsp;
 
<select id="select_w" onchange="s_w(this.value)">
    <option value ="4">4px</option>
    <option value ="6">6px</option>
    <option value ="8">8px</option>
    <option value ="10">10px</option>
    <option value ="12">12px</option>
    <option value ="16">16px</option>
</select>
&emsp;
<button onclick="state='pencil'">铅笔</button>
<button onclick="state='rectangle'">矩形</button>
<button onclick="state='straight'">直线</button>
<button onclick="state='circle'">圆形</button>
&emsp;
<button onclick="state='rub'">橡皮</button>
&emsp;
<button onclick="clear_all()">清除</buttun>
<!-- <button id='cancel' onclick="pic_cancel()">撤销</button> -->
</br>
</center>


<script type="text/javascript">

    var color = document.getElementById("color"); 
    function changeColor(){ 　　　　　　　　　　　　　　　　　　　　 //改变颜色的事件
　　　　linecolor=color.value;
　　}

    
    function s_w(v){
        v=parseInt(v);
        linw=v;
    }

    var canvas = document.getElementById('canvas');  //获取标签
    var ctx = canvas.getContext("2d");  
    var state="pencil";
    var fillStyle = "white";
    
    var onoff = false;  //按下标记
    var oldx = -10;
    var oldy = -10;
    //设置颜色
    var linecolor = "black";
    var linw = 4;
    var imgData;

    canvas.addEventListener("mousemove",draw,true);  //鼠标移动事件
    canvas.addEventListener("mousedown",down,false);  //鼠标按下事件
    canvas.addEventListener("mouseup",up,false);  //鼠标弹起事件

    function down(event){
        onoff = true;
        oldx = event.offsetX ;
        oldy = event.offsetY ;
        if(state=="straight"){
            ctx.beginPath();
            ctx.moveTo(oldx,oldy);
        }
    }
    function up(){
        onoff = false;
        var newx = event.offsetX - 10;
        var newy = event.offsetY - 10;
        ctx.strokeStyle = linecolor;
        ctx.lineWidth = linw;
        ctx.lineCap = "round";
        if(state=="rectangle"){
            ctx.strokeRect(oldx, oldy, newx-oldx,newy-oldy);
            }
        if(state=="straight"){
            ctx.lineTo(newx,newy);
            ctx.stroke();
        }
        if(state=='circle'){

            var distance=Math.pow(Math.pow(oldx-newx,2)+Math.pow(oldy-newy,2),0.5);
            ctx.moveTo(oldx+distance, oldy);
            ctx.arc(oldx,oldy,distance,0,2*Math.PI);
            ctx.stroke();
            oldx = newx;
            oldy = newy;
            ctx.beginPath();

        }
        // var width = ctx.canvas.width;
        // var height = ctx.canvas.height;
        // imgData = ctx.getImageData(0, 0, width, height);
    }
    function draw(event){
        if (onoff==true) {
            var newx = event.offsetX ;
            var newy = event.offsetY ;
            if(state=="pencil"){
                ctx.beginPath();
                ctx.moveTo(oldx,oldy);
                ctx.lineTo(newx,newy);
                ctx.strokeStyle = linecolor;
                ctx.lineWidth = linw;
                ctx.lineCap = "round";
                ctx.stroke();
                oldx = newx;
                oldy = newy;
            }
            if(state=="rub"){
                ctx.beginPath();
                ctx.moveTo(oldx,oldy);
                ctx.lineTo(newx,newy);
                ctx.strokeStyle = 'white';
                ctx.lineWidth = linw;
                ctx.lineCap = "round";
                ctx.stroke();
                oldx = newx;
                oldy = newy;
            }
            
            // if(stat=="rectangle"){
            //     ctx.strokeRect(oldx, oldy, newx-oldx, newy-oldy);
            // }
            
        }
    }
    
    function canvas_copy(){
        
        var width = ctx.canvas.width;
        var height = ctx.canvas.height;
        imgData = ctx.getImageData(0, 0, width, height);
    }

    function canvas_paste(){
        ctx.putImageData(imgData,0,0);
    }

    function pic_cancel(){
        canvas_paste();
    }
    
    function clear_all(){
        canvas.height=canvas.height;
    }
     
    </script> 
</body>
</html>